<template>
    <router-link to="/home">
      <img style="width: 100%;height: 70px;" :src="imgs.logo">
    </router-link>
   
    <el-menu
        router
        :uniqueOpened="true"
        default-active="1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        text-color="#000"
        active-text-color="#6b56ff"
      >
      <el-menu-item index="/">
        <img class="img" :src="imgs.src1" />
        <template #title>工作台</template>
      </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            <img class="img" :src= "imgs.src2"/>
            <span>园区管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/build">楼宇管理</el-menu-item>
            <el-menu-item index="/company">企业管理</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
    
        <el-sub-menu index="3">
          <template #title>
            <img class="img" :src= "imgs.src3"/>
            <span>行车管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/area">区域管理</el-menu-item>
            <el-menu-item index="/monthCard">月卡管理</el-menu-item>
            <el-menu-item index="/payment">停车缴费管理</el-menu-item>
            <el-menu-item index="/accounting">计费规则管理</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      <el-menu-item index="/property">
        <img class="img" :src= "imgs.src4"/>
        <template #title>物业费管理</template>
      </el-menu-item>
      <el-sub-menu index="5">
          <template #title>
            <img class="img" :src= "imgs.src5"/>
            <span>一体杆管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/pieceSwing">一体杆管理</el-menu-item>
            <el-menu-item index="/waring">告警记录</el-menu-item>
           </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="6">
          <template #title>
            <img class="img" :src= "imgs.src6"/>
            <span>系统管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/employees">员工管理</el-menu-item>
            <el-menu-item index="/role">角色管理</el-menu-item>
         </el-menu-item-group>
        </el-sub-menu>
   
    </el-menu>
</template>
<script setup>
import { ref } from "vue";

const imgs = ref({
  logo:'',
  src1:'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/smartPark/menu/image/workbench-active.png',
  src2:'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/smartPark/menu/image/park-active.png',
  src3:'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/smartPark/menu/image/car.png',
  src4:'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/smartPark/menu/image/propety.png',
  src5:'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/smartPark/menu/image/rod.png',
  src6:'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/smartPark/menu/image/system.png',
})
const handleOpen = (key) => {
    console.log(key);
  };
const handleClose = (key) => {
    console.log(key);
  };
</script>
<style scoped>
.img{
  width: 18px;
  height: 18px; 
  margin-right: 10px;
}
</style>